<!DOCTYPE html>
<html>

<head>
  <title>My Notes</title>
  <link rel="icon" type="image/png" href="https://image.18touch.com/bgame/202009/09150349ri42.png">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=535,maximum-scale=0.765, user-scalable=no">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
    integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.4/dist/sweetalert2.min.css">
  <style>
    body {
      background-color: #f2f3f5a8;
      background-attachment: fixed;
    }


    .container {
      position: fixed;
      bottom: -5px;
      border-radius: 20px 20px 0px 0px;
      width: 100%;


      padding-top: 10px;
      padding-right: 25px;
      padding-bottom: 0px;
      padding-left: 25px;

      background-color: rgb(255, 255, 255);
      border: 1px solid rgb(255, 255, 255);
      width: fit-content;
      display: flex;
      align-items: center;
      transform: translate(-50%, 0);
      left: 50%;
      margin-left: 0px;
      z-index: 2;
      box-shadow: 0px 0px 20px rgba(122, 122, 122, 0.329);

    }

    .completedlist-dialog {
      position: fixed;
      bottom: 0px;
      border-radius: 30px 30px 0px 0px;
      width: 490px;


      padding-top: 10px;
      padding-right: 25px;
      padding-bottom: 10px;
      padding-left: 25px;

      background-color: rgb(255, 255, 255);
      border: 1px solid rgb(255, 255, 255);
      display: flex;
      align-items: center;
      transform: translate(-50%, 0);
      left: 50%;
      margin-left: 0px;
      z-index: 5;
      box-shadow: 0px 0px 20px rgba(122, 122, 122, 0.329);
      display: none;
    }

    .completedlist-content {

      display: flex;
      flex-direction: column;
      line-height: 1.5;
    }

    .completedlist-items {
      color: #636363;
      bottom: 20px;
      font-size: 19px;
      margin-bottom: 20px;
      overflow-y: scroll;
      max-height: 400px;
    }

    .completedlist-items>div:not(:last-child) {
      margin-bottom: 11px;
    }


    .completedlist-item {

      bottom: 20px;
      font-size: 19px;
      margin-bottom: 20px;
      padding: 5px;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .close-completedlist-dialog-btn {
      font-size: 22px;
      color: #555555ef;
      width: auto;
      margin-top: 0px;
      margin-bottom: 5px;
      padding: 0px 0px;
      background-color: #fff;
      border: 1px solid #e6e6e600;
      border-radius: 5px;
      cursor: pointer;
      margin-left: 5px;
    }

    .completed-title {
      font-size: 19px;
      color: #555555ef;
      width: auto;
      margin-top: 0px;
      margin-bottom: 5px;
      padding: 0px 0px;
      background-color: #ffffff00;
      border: 1px solid #e6e6e600;
      font-weight: bold;
      cursor: pointer;

      transform: translate(-50%, 0);
      left: 50%;
      margin-left: 45%;
      margin-bottom: 15px;

    }



    .note-list {

      position: absolute;

      left: 50%;
      width: 535px;

      bottom: 100px;


      margin-top: 0px;
      margin-bottom: 0px;
      display: flex;
      flex-direction: column-reverse;
      position: fixed;
      transform: translate(-50%, 0);
      overflow-y: scroll;
      margin-left: 2px;
      z-index: 0;

    }

    .note-item {
      font-size: 19px;
      font-family: "sans-serif", Arial, Helvetica;
      width: 479px;
      margin: 0px 9px 15px;
      line-height: 1.7;
      color: #414141;
      padding-top: 37px;
      padding-right: 15px;
      padding-bottom: 13px;
      padding-left: 20px;

      border-radius: 10px 10px 0px 10px;
      background-color: #ffffff;
      word-wrap: break-word;
      position: relative;
      z-index: 0;
      box-shadow: 0px 2px 5px rgba(224, 224, 224, 0.2);
    }

    .input-box {
      font-size: 20px;
      font-family: "sans-serif", Arial, Helvetica;
      width: 481px;
      margin-left: 8px;

      margin-bottom: 55px;

      color: #414141;
      padding: 0px 0px;
      border-radius: 0px;
      border: none;
      outline: none;
      resize: none;
      line-height: 1.5;
      border: 1px solid #ffffff;
      height: 1.5em;
      max-height: 20em;
      overflow-y: auto;

    }

    .edit-box {
      font-size: 19px;
      font-family: "sans-serif", Arial, Helvetica;
      width: 481px;
      margin-left: 25px;

      margin-bottom: 7px;
      color: #414141;
      padding: 0px 0px;
      border-radius: 0px;
      border: none;
      outline: none;
      resize: none;
      line-height: 1.5;
      border: 1px solid rgb(255, 255, 255);
      max-height: 20em;
      height: auto;
      overflow: hidden;

    }

    .edit-box:focus {
      height: auto;
      overflow: visible;
    }

    .edit-container {
      position: fixed;
      bottom: -5px;
      border-radius: 30px 30px 0px 0px;
      width: 100%;


      padding-top: 10px;
      padding-right: 16px;
      padding-bottom: 0px;
      padding-left: 16px;

      background-color: rgb(255, 255, 255);
      border: 1px solid rgb(255, 255, 255);
      width: fit-content;

      align-items: center;
      transform: translate(-50%, 0);
      left: 50%;
      margin-left: 0px;
      display: none;
      z-index: 4;
      box-shadow: 0px 0px 15px rgba(156, 156, 156, 0.329);
    }


    .save-btn {
      background-color: #ffffff00;

      font-weight: bold;
      color: #1156d4;
      border: none;
      cursor: pointer;
      margin-left: 447px;
      font-size: 20px;
      width: max-content;
      margin-bottom: 21px;
    }


    .note-time {
      font-family: "sans-serif", Arial, Helvetica;
      font-size: 16px;
      color: rgb(207, 207, 207);
      position: absolute;
      top: 10px;
      left: 20px;
    }

    .delete-btn {
      font-size: 16px;
      color: rgb(175, 175, 175);
      position: absolute;
      top: 10px;
      right: 20px;
      cursor: pointer;
      background-color: transparent;
      border: none;
    }

    .complete-btn {
      font-size: 17px;
      color: rgb(175, 175, 175);
      position: absolute;
      top: 9px;
      right: 75px;
      cursor: pointer;
      background-color: transparent;
      border: none;
    }

    .send-btn {
      bottom: 15px;

      background-color: transparent;
      font-size: 21px;
      color: #1156d4;
      border: none;
      font-weight: bold;
      position: fixed;
      height: 30px;
      width: max-content;
      left: 50%;
      margin-left: 225px;
      transform: translateX(-50%);
      z-index: 3;

    }

    .tag-btn1 {
      bottom: 15px;
      width: 10px;
      background-color: transparent;
      font-size: 20px;
      color: #a8a8a8;
      border: none;
      font-weight: bold;
      position: fixed;
      height: 30px;
      width: max-content;
      left: 50%;
      margin-left: -150px;
      transform: translateX(-50%);
      z-index: 3;

    }

    .tag-btn2 {
      bottom: 15px;
      width: 10px;
      background-color: transparent;
      font-size: 20px;
      color: #a8a8a8;
      border: none;
      font-weight: bold;
      position: fixed;
      height: 30px;
      width: max-content;
      left: 50%;
      margin-left: -105px;
      transform: translateX(-50%);
      z-index: 3;

    }

    .delete-all-btn {
      bottom: 15px;
      width: 10px;
      background-color: transparent;
      font-size: 20px;
      color: #a8a8a8;
      border: none;
      font-weight: bold;
      position: fixed;
      height: 30px;
      width: max-content;
      left: 50%;
      margin-left: -190px;
      transform: translateX(-50%);
      z-index: 3;
    }

    .copy-all-btn {
      bottom: 15px;
      width: 10px;
      background-color: transparent;
      font-size: 18px;
      color: #a8a8a8;
      border: none;
      font-weight: bold;
      position: fixed;
      height: 30px;
      width: max-content;
      left: 50%;
      margin-left: -229px;
      transform: translateX(-50%);
      z-index: 3;
      display: block;
    }

    .back-btn {
      bottom: 15px;

      background-color: transparent;
      font-size: 20px;
      color: #a8a8a8;

      border: none;
      font-weight: bold;
      position: fixed;
      height: 30px;
      width: max-content;
      left: 50%;
      margin-left: -229px;
      transform: translateX(-50%);
      z-index: 3;
      display: none;

    }


    .toast {
      position: fixed;
      bottom: 40%;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 15px;
      border-radius: 13px;
      background-color: #000000c4;
      color: #ffffff;
      font-size: 18px;
      z-index: 5;
    }

    .mask {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.151);
      z-index: 4;
      display: none;
    }

    .mask-b {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.151);
      z-index: 4;
      display: none;
    }

    .send-btn {
      color: #aaa;
    }



    .confirm-dialog {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 5;
      /* 添加事件监听器 */
      cursor: pointer;
    }

    .confirm-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border-radius: 15px;
    }

    .confirm-message {
      font-size: 20px;
      color: #414141;
      margin-bottom: 20px;
    }

    .confirm-buttons {
      display: flex;
      justify-content: center;
      display: flex;
      justify-content: center;
    }

    .confirm-btn {
      background-color: #134B46;
      font-size: 20px;
      color: white;
      border: none;
      border-radius: 20px;
      padding: 5px 15px;
      cursor: pointer;
      margin: 0px 10px;
    }





    .tag-window {
      position: fixed;
      top: 0px;
      justify-content: center;
      /* 水平居中 */
      margin-left: -10px;
      width: 545px;
      height: auto;
      max-height: 500px;
      background-color: #fff;
      border: none;
      padding: 0px 0px;

      z-index: 4;
      display: none;


      border-radius: 0px 0px 20px 20px;
      box-shadow: 0px 0px 20px rgba(122, 122, 122, 0.329);
      transition: transform 0.3s;
    }

    .tag-window-content {
      margin-bottom: 5px;
      padding: 10px 30px;
      overflow-y: auto;
      max-height: 415px;
      box-shadow: inset 0 -2px 10px rgba(7, 7, 7, 0.034);
    }

    .tag-window p {
      overflow-wrap: break-word;
      max-height: 500px;
    }



    .tag {
      display: inline-block;
      padding: 2px 10px;
      margin: 2px;
      border-radius: 30px;
      border: 1px solid #5851B5;
      margin-bottom: 8px;
      font-size: 18px;
      box-shadow: 2px 2px 15px #E4E4E4;
    }

    .tag-window button {

      /* 按钮的上边距*/
      font-size: 19px;


      color: #ffffff;
      border: none;
      border-radius: 10px;
      cursor: pointer;


    }

    .tag-window-close-btn {


      padding: 5px 10px;
      margin-bottom: 20px;
      margin-left: 370px;
      background-color: #5851B5;
      box-shadow: 0px 0px 10px #A1A1A1;
      margin-top: 10px;
    }

    .tag-window-close-btn1 {
      padding: 5px 10px;
      margin-left: 30px;

      margin-bottom: 30px;
      /* 下边距*/
      background-color: #5851B5;
      box-shadow: 0px 0px 10px #A1A1A1;
      margin-top: -15px;
    }

    .tag-window-close-btn2 {
      padding: 1px 1px;
      margin-bottom: 0px;
      width: 50px;
      height: 5px;
      background-color: #DEDEDE;
      bottom: 15px;
      position: absolute;
      /* 设置为绝对定位 */
      left: 50%;
      /* 将左边距离设置为 50% */
      transform: translateX(-50%);

    }



    /* 删除二次却*/
    .confirm-box1 {
      position: fixed;


      width: 245px;

      height: auto;
      padding: 15px;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.151);
      display: flex;
      align-items: center;
      z-index: 3;
    }


    .message1 {
      display: block;
      font-size: 1.2rem;
      margin-right: 20px;

    }

    .confirm-btn1,
    .cancel-btn1 {
      display: block;
      height: 30px;
      padding: 0px 15px 0px 15px;

      border-radius: 100px;

      font-size: 18px;

    }

    .confirm-btn1 {
      border: 1px solid #afafaf00;
      background-color: #5851B5;
      color: #fff;
      margin-right: 0px;
    }

    .cancel-btn1 {
      border: 1px solid #afafaf;
      background-color: #fff;
      color: #2c2c2c;
      margin-right: 10px;
    }

    .tag-btn {
      top: 23px;
      width: 10px;

      background-color: #b1b1b100;
      font-size: 20px;
      color: #d4d4d4;
      border: none;
      font-weight: bold;
      position: fixed;
      left: 50%;
      margin-left: -235px;
      transform: translate(-50%, -50%);
      z-index: 3;
    }

    .open-popup {
      top: 24px;
      width: 10px;
      background-color: #b1b1b100;
      font-size: 22px;
      color: #d4d4d4;
      border: none;
      font-weight: bold;
      position: fixed;
      left: 50%;
      margin-left: 100px;
      transform: translate(-50%, -50%);
      z-index: 3;
    }

    .openModal {
      top: 24px;
      width: 10px;
      background-color: #b1b1b100;
      font-size: 22px;
      color: #d4d4d4;
      border: none;
      font-weight: bold;
      position: fixed;
      left: 50%;
      margin-left: -125px;
      transform: translate(-50%, -50%);
      z-index: 3;
    }

    .open-reading-log {
      top: 24px;
      width: 10px;
      background-color: #b1b1b100;
      font-size: 20px;
      color: #d4d4d4;
      border: none;
      font-weight: bold;
      position: fixed;
      left: 50%;
      margin-left: -180px;
      transform: translate(-50%, -50%);
      z-index: 3;
    }

    .load-completedlist-btn {
      top: 23px;
      width: 10px;

      background-color: #ffffff00;
      font-size: 22px;
      color: #d4d4d4;
      border-radius: 30px;
      border: none;
      font-weight: bold;
      position: fixed;

      width: max-content;
      left: 50%;
      margin-left: 160px;
      transform: translate(-50%, -50%);
      z-index: 3;
    }

    .note-count {
      font-size: 18px;
      color: #d4d4d4;
      position: fixed;
      top: 23px;
      border-radius: 30px;
      transform: translate(-50%, -50%);
      right: 50%;
      margin-right: -286px;
    }



    .title1 {
      font-family: "sans-serif", Arial, Helvetica;
      ;
      background-color: #ffffff00;
      font-weight: bold;
      font-size: 20px;
      border: none;
      color: #5851B5;
      position: fixed;
      top: 23px;
      border-radius: 30px;
      transform: translate(-50%, -50%);
      left: 50%;
      margin-left: 15px;

    }

    header {
      position: fixed;
      top: 0px;
      left: 0;
      right: 0;
      height: 45px;
      background-color: #ffffff;

    }

    .note-list {
      top: 47px;
    }

    .gray-dot {
      height: 8px;
      width: 8px;
      background-color: rgb(197, 197, 197);
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
    }

    .tag-window1 {
      position: fixed;
      bottom: -5px;

      width: 180px;
      height: auto;

      background-color: #fff;
      border: none;



      z-index: 4;
      display: none;


      border-radius: 0px 0px 0px 0px;
      box-shadow: inset -15px 0px 5px -5px rgba(196, 196, 196, 0.37);
      /*  5px'是水平阴影偏移量，'0px'是垂直阴影偏移量。'5px'是阴影模糊半径，它指定了阴影边缘的模糊程度。'-5px'是阴影扩展半径，删除二次却*/

      transform: translate(-50%, -50%);
      left: 50%;
      margin-left: 70px;
    }

    .tag-window-content1 {
      padding-bottom: 7px;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: scroll;
    }

    .btn {
      font-size: 18px;
      padding: 0;
      margin-right: 10px;
      border: none;
      border-radius: 5px;
      background-color: #ffffff00;
      color: #5f5f5f;
      cursor: pointer;
    }

    .icon-btn {
      bottom: 15px;
      width: 10px;
      background-color: transparent;
      font-size: 20px;
      color: #a8a8a8;
      border: none;
      font-weight: bold;
      position: fixed;
      height: 30px;
      width: max-content;
      left: 50%;
      margin-left: 180px;
      transform: translateX(-50%);
      z-index: 3;
      display: none;
    }



    .timer-popup {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #ffffff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateY(100%);
      transition: transform 0.3s ease-in-out;
      z-index: 9;
      border-radius: 30px 30px 0px 0px;
      box-shadow: 0px -8px 15px rgba(138, 138, 138, 0.062);
      height: 750px;
    }

    .timer-popup.show {
      transform: translateY(0%);
    }

    .timer-popup-dragging {
      transition: none;
    }


    .timer {
      font-size: 3.5rem;
      color: rgb(54, 54, 54);
      font-family: Arial, sans-serif;
    }

    .timer-btn1 {
      background-color: #3d3d3d;
      border: none;
      border-radius: 50px;
      color: #fff;
      cursor: pointer;
      font-size: 1.2rem;
      padding: 12px 27px;
      transition: background-color 0.2s ease, transform 0.2s ease;
      outline: none;
      margin-top: 300px;
      box-shadow: 0px 0px 20px rgba(95, 95, 95, 0.651);

    }

    .timer-btn1:hover {
      background-color: #3d3d3d;
      box-shadow: 0px 0px 20px rgba(95, 95, 95, 0.651);
    }

    .timer-btn1:active {
      transform: scale(0.85);
    }

    .timer-btn2 {
      background-color: #d6d6d600;
      border: none;
      border-radius: 50px;
      color: #a1a1a1;
      cursor: pointer;
      font-size: 14px;
      padding: 3px 10px;
      margin-top: 45px;
    }

    .timer-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 220px;
      height: 220px;
      position: relative;
      top: 190px;
    }

    .timer-container::before {
      content: '';
      width: 140%;
      height: 140%;
      position: absolute;
      border-radius: 50%;
      border: 2px solid rgba(196, 196, 196, 0.527);

      z-index: 0;
    }

    .timer-ring {
      width: 140%;
      height: 140%;
      position: absolute;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0);
      animation: timer-ring 5s linear infinite;
      animation-play-state: paused;
    }

    @keyframes timer-ring {
      0% {
        box-shadow: 0 0 0 20px rgba(255, 102, 102, 0), 0 0 0 40px rgba(255, 102, 102, 0);
      }

      50% {
        box-shadow: 0 0 0 0px rgba(189, 189, 189, 0.247), 0 0 0 0px rgba(194, 194, 194, 0.308);
      }

      100% {
        box-shadow: 0 0 0 20px rgba(255, 102, 102, 0), 0 0 0 40px rgba(255, 102, 102, 0);
      }

    }

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.959);
      z-index: 5;
      display: none;
    }

    .close-popup {
      position: absolute;
      top: 30px;
      left: 25px;
      font-size: 1.5rem;
      background: none;
      border: none;
      cursor: pointer;
      color: #a0a0a0;
      font-size: 18px;
    }

    .heng-a {
      position: absolute;
      width: 40px;
      height: 5px;

      top: 9px;
      left: 50%;
      margin-left: -20px;
      align-items: center;
      transform: translateY(50%);
      font-size: 1.5rem;
      background-color: #e6e6e6;
      border: none;
      cursor: pointer;
      border-radius: 30px;
      font-size: 18px;
    }



    /* ------------------ */
    .popup {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #ffffff;
      padding: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateY(100%);
      transition: transform 0.3s ease-in-out;
      z-index: 9;
      border-radius: 10px 10px 0px 0px;
      box-shadow: 0px -8px 15px rgba(138, 138, 138, 0);
      height: 200px;
      border-top: 1px solid rgba(196, 196, 196, 0.527);
    }

    .popup.show {
      transform: translateY(0%);
    }

    #reading-log-popup ul {
      list-style-type: none;
      padding: 0;
      margin-bottom: 15px;

    }

    #reading-log-popup li {
      font-size: 19px;
      width: 430px;
      padding: 8px 0px 8px 0px;
      border-bottom: 1px solid #eeeeee;
      font-family: "sans-serif", Arial, Helvetica;
    }

    #tasks>li {
      color: #222222;
      font-weight: bold;
    }

    .subtasks>li {
      color: #363636;
      margin-left: 10px;
      font-weight: lighter;
    }

    #tasks {
      height: 90vh;
      width: 440px;
      /* 视口高度减去 10px */
      overflow-y: auto;
      /* 当内容超出容器高度时，显示垂直滚动条 */
      padding-bottom: 25px;
      /* 距离页面底部 10px */
      margin-bottom: 20px;
      bottom: 20px;
    }

    #task-input {
      width: 100%;
      padding: 8px 8px 8px 15px;
      border: 1px solid #ccc;
      border-radius: 40px;
      font-size: 18px;
    }

    .save-task-btn {
      padding: 6px 12px;
      border: 1px solid #baabff00;
      background-color: #b4acff;
      color: #ffffff;
      border-radius: 40px;
      width: 80px;
      margin-left: 10px;
      font-size: 18px;
    }

    .flex-container1 {
      display: flex;
      align-items: center;
      margin-top: 20px;
      font-size: 18px;
    }

    #add-task-btn {
      position: absolute;
      bottom: 10px;
      right: 20px;
      transform: translateX(-50%);
      padding: 3px 8px;
      border: none;
      background-color: #ffffff00;
      border-radius: 40px;
      margin-top: 10px;
      margin-bottom: 10px;
      bottom: 10px;
      font-size: 18px;
      color: #a0a0a0;
    }

    .add-subtask-btn {
      
      
      margin-bottom: 10px;
      margin-top: 0px;
      left: 50%;
     
      margin-left: 165px;
      padding: 4px 12px;
      border: 1px solid #baabff00;
      background-color: #b4acff;
      color: #ffffff;
      border-radius: 40px;
      font-size: 16px;

    }

    .delete-task-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      margin-left: 8px;
      color: #ddddddd2;
      float: right;
      margin-right: 15px;
      font-size: 15px;
    }

    .delete-subtaskbtn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      margin-right: 25px;
      float: right;
      color: #ddddddd2;
      font-size: 15px;
    }

    .flex-container {
      display: flex;
      align-items: center;
      margin-top: 20px;
      font-size: 18px;
    }


    .subtask-time {
      font-size: 18px;
      padding: 4px 6px;
      border-radius: 45px;
      border: 1px solid #ccc;
      background-color: #ffffff00;
      color: #474747;
      width: 55px;

    }

    .subtask-num {
      margin-left: 10px;
      margin-right: 10px;
      padding: 6px 6px 6px 12px;
      border-radius: 50px;
      border: 1px solid #ccc;
      font-size: 18px;

    }

    .save-subtask-btn {
      padding: 4px 12px;
      border: 1px solid #baabff00;
      background-color: #b4acff;
      color: #ffffff;
      border-radius: 40px;
      font-size: 18px;
    }

    .reading-log-popup {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #ffffff;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateY(100%);
      transition: transform 0.3s ease-in-out;
      z-index: 9;
      border-radius: 30px 30px 0px 0px;
      box-shadow: 0px -8px 15px rgba(138, 138, 138, 0.055);
      height: 550px;
    }

    .reading-log-popup.show {
      transform: translateY(0%);
    }

    .reading-log-popup-dragging {
      transition: none;
    }

    /* --------目标拆解 下面------------------------- */

    .containerC {

      margin: 0 auto;
      padding: 0px 0px 0px 0px;
      background-color: #fff;
      border-radius: 5px;
      position: relative;
      top: 55px;
      margin-left: 12px;
      margin-right: 12px;
      margin-top: 0px;
      bottom: 0;
      font-size: 19px;
      z-index: 1000;
    }



    .fixed-bottom {
      position: fixed;
      top: 220px;
      z-index: 999;
      display: flex;
      background-color: #ffffff;
      left: 0;
      right: 0;
    }

    #task1-input1 {
      display: flex;
      width: 400px;
      padding: 10px 10px 10px 15px;
      margin-top: 15px;
      margin-bottom: 120px;
      margin-left: 10px;
      border-radius: 25px;
      border: solid 1px #ebebeb;
      box-shadow: 0px 0px 0px 0px rgba(165, 165, 165, 0.596);
      font-size: 19px;
      z-index: 1006;
    }

    #save-btnC {
      display: flex;
      width: 80px;
      padding: 10px 10px 10px 20px;
      margin-top: 15px;
      margin-bottom: 120px;
      margin-left: 10px;
      border-radius: 55px;
      border: solid 1px #ebebeb;
      box-shadow: 0px 0px 0px 0px rgba(165, 165, 165, 0.596);
      color: #b4acff;
      background-color: #fff;

      font-size: 19px;
      z-index: 1006;
    }

    .counters1 {
      top: 300px;
      display: flex;
      gap: 10px;
      position: fixed;
      z-index: 1002;
      background-color: #fff;
      padding: 15px 10px 15px 10px;
      box-shadow: 0 0px 0px rgba(92, 92, 92, 0.1);
      left: 12px;
      right: 11px;

      margin-top: 0px;
      border-radius: 12px;
      border: 1px solid #eeeeee;
      font-size: 19px;

    }

    .headerC {
      position: fixed;

      top: 155px;

      left: 0;
      right: 0;
      height: auto;
      background-color: #fff;
      padding: 30px 0 10px 0;
      text-align: center;
      box-shadow: 0 0px 0px rgba(184, 184, 184, 0.11);
      border-radius: 20px 20px 0px 0px;
      z-index: 1002;
      color: #3a3a3a;
      font-weight: bold;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 19px;
    }

    /* 添加弹窗样式 */
    .modal {

      position: fixed;

      z-index: 999;
      top: 0px;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(255, 255, 255, 0.959);
      transform: translateY(100%);
      transition: transform 0.3s ease-in-out;
      flex-direction: column;
      align-items: center;
    }

    .modal.show {
      transform: translateY(0%);
    }

    .modal-dragging {
      transition: none;
    }

    .modal-content {
      position: fixed;
      background-color: #ffffff;
      margin: 0px 0px 0px 11px;
      bottom: 0px;
      top: 158px;
      padding: 185px 0px 0px 0px;
      box-shadow: 0 -12px 15px rgba(184, 184, 184, 0.11);
      border: none;
      width: 98%;
      height: auto;
      overflow-y: auto;
      overflow-x: hidden;
      border-radius: 20px 20px 5px 5px;
      z-index: 1000;
    }

    .task1-item {
      display: block;
      list-style-type: none;
      padding: 10px 10px 40px 10px;
      margin-bottom: 18px;

      left: 50%;
      margin-left: -50px;
      transform: translateX(0%);
      background-color: #ffffff;
      border-radius: 10px;
      z-index: 1000;
      box-shadow: 0px 0px 10px 0px rgba(165, 165, 165, 0.158);
    }

    .close {
      color: #8d8d8d;
      float: right;
      top: 175px;
      left: 20px;
      font-size: 19px;
      font-weight: bold;
      position: absolute;
      z-index: 9999;
      position: fixed;
    }




    .task1-text {
      display: inline-block;
      padding-left: 13px;
      position: relative;
      z-index: 2;
    }

    .task1-text:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background-color: #7fb9f7;
      border-radius: 2px;
    }






    .task1-date {
      font-size: 16px;
      font-weight: bold;
      color: #727272;

    }




    .subtask1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 35px;
  font-style: italic;
  color: #666;
  margin-left: 5px;
 
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 17px;
  width: 100%;
  position: relative; /* 添加这一行 */
}

.subtask1::before {
  content: "•"; /* 添加这一行 */
  color: #666;
  position: absolute; /* 添加这一行 */
  left: 0px;
  top: 0; /* 添加这一行 */
  padding-left: 20px;
}





    .completed-count {
      font-size: 17px;
      
      color: #007bff;
      margin-bottom: 5px;
    }

    .button-wrapper {
      margin-left: auto;
      /* 修改这一行 */
    }


    .copy-btn {
      background-color: rgba(177, 177, 177, 0);
      color: #c2c2c2;
      text-align: center;
      border: none;
      border-radius: 5px;
      white-space: nowrap;
      display: block;
      width: 20px;
      height: 20px;
      z-index: 999;
      /* 已隐藏 */
      font-size: 14px;
    }

    .complete-btnC {
      background-color: rgba(177, 177, 177, 0);
      color: #c2c2c2;
      text-align: center;
      border: none;
      border-radius: 5px;
      white-space: nowrap;
      margin-right: 15px;
      width: 20px;
      height: 20px;
      font-size: 14px;
    }

    .delete-btnC {
      background-color: rgba(177, 177, 177, 0);
      color: #c2c2c2;
    
      border: none;
      border-radius: 5px;
      
      margin-left: 15px;
      margin-right: 40px;
      
      width: 20px;
      height: 20px;
      font-size: 14px;
      float: right;
    }

    .edit-log-btn {
      background-color: rgba(177, 177, 177, 0);
      color: #c2c2c2;
      text-align: center;
      border: none;
      border-radius: 5px;
      white-space: nowrap;
      margin-right: 0px;
      margin-left: 5px;
      float: right;
      width: 30px;
      height: 20px;
      font-size: 14px;
    }

    .delete-log-btn {
      background-color: rgba(177, 177, 177, 0);
      color: #c2c2c2;
      text-align: center;
      border: none;
      border-radius: 5px;
      white-space: nowrap;
      margin-right: 0px;
      margin-left: 10px;
      float: right;
      width: 30px;
      height: 20px;
      font-size: 14px;
    }



    .log-list {
      border: 1px solid #eeeeee;
      border-radius: 5px;
      padding: 10px 0px 10px 10px;
      color: #666;
      font-size: 16px;
    }

    .no-logs {
      border: none;
      padding: 0px;
    }

    .log-btn {
      float: right;

      padding: 3px 6px 3px 6px;
      background-color: #b4acff;
      color: #ffffff;
      text-align: center;
      border: #1c446e;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0px 0px 8px 0px rgba(219, 219, 219, 0);
      margin-bottom: 1px;
      margin-top: 7px;
      white-space: nowrap;
      font-size: 14px;

      width: 25px;
      height: 25px;


    }

    .subtask1-btn {
      position: relative;
      float: left;
      padding: 3px 5.5px 3px 5.5px;
      background-color: #b4acff;
      color: #ffffff;
      border: #1c446e;
      border-radius: 50%;
      margin-top: 7px;
      font-size: 14px;
      width: 25px;
      height: 25px;
    }

    .log-label {
      color: rgb(116, 116, 240);
      border: 1px solid rgb(200, 208, 255);
      border-radius: 5px;
      padding: 1px 5px;
      font-size: 12px;
      margin-right: 8px;

    }





    .count-wrapper {
      display: flex;
      justify-content: space-between;
    }

    .subtask1-count {
      font-size: 17px;
      font-weight: bold;
      color: #007bff;
      margin-bottom: 5px;
      margin-top: 8px;
    }

    .completed-count {
      font-size: 16px;
      
      color: #a46af0;
      margin-bottom: 8px;
      margin-top: 8px;
    }






    .task1-status {
      margin-left: 10px;
      font-size: 10px;
      padding: 3px 5px 2px 5px;
      border-radius: 3px;
      background-color: #ffffff;
      border: 1px solid #7fb9f7;
      appearance: none;
      color: #57a7fd;

    }


    .task1-status option {
      font-size: 15px;
      padding: 5px 10px;
      border-radius: 5px;
      background-color: #f5f5f5;
      color: #333;
    }

    .task1-status:focus {
      outline: none;
      border-color: #007bff;
    }


    .overlayC {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.959);
      z-index: 5;
      display: none;
    }



    .total {
      margin-left: 5px;
      margin-top: 1px;

    }

    .unfinished {
      margin-left: 25px;
    }

    .finished {
      margin-left: 25px;

    }

    .total-sum {
      margin-left: -348px;
      margin-top: 41px;
      color: #666666;
    }

    .monthly-sum {
      margin-left: 20px;
      margin-top: 41px;
      color: #666666;
    }



    .monthly-number {
      color: #ffc400;
      font-size: 19px;
      font-weight: bold;
    }

    .total-number {
      color: #00ABFF;
      font-size: 19px;
      font-weight: bold;
    }


    .unfinished-number {
      color: #b61d12;
      font-size: 21px;
      font-weight: bold;
    }

    .finished-number {
      color: #2072B2;
      font-size: 21px;
      font-weight: bold;

    }
  </style>

</head>

<div class="note-list"></div>

<div class="mask"></div> <!--新增-->

<body>


  <header></header> <!-- 新增 -->
  <!-- 添加目标跟踪按钮 -->
  <button class="openModal" id="openModal"><i class="fas fa-bullseye"></i></button>

  <!-- 添加弹窗结构 -->
  <div id="myModal" class="modal">

    <div class="modal-content">

      <div class="headerC" id="headerC">
        <button class="heng-a"></button>
        目标拆解
      </div>
      <span id="closeModal" class="close"><i class="fas fa-chevron-down"></i></span>

      <div class="counters1">
        <div id="total-count" class="total"></div>
        <div id="unfinished-count" class="unfinished"></div>
        <div id="finished-count" class="finished"></div>
        <div id="total-sum" class="total-sum"></div>
        <div id="monthly-sum" class="monthly-sum"></div>

      </div>

      <div class="containerC">

        <div class="fixed-bottom">
          <input type="text" id="task1-input1" placeholder="请输入目标">
          <button id="save-btnC">发送</i></button>
        </div>

        <ul id="task1-list1"></ul>
      </div>


      <!-- 新增弹窗及画布 -->
      <div class="overlayC" id="overlayC"></div>

    </div>
  </div>
  <!-------------------->
  <button class="open-reading-log" id="open-reading-log"><i class="fas fa-book"></i></button>

  <!-- 在 HTML 中添加阅读记录弹窗和新增任务弹窗 -->
  <div class="reading-log-popup" id="reading-log-popup">
    <button class="heng-a"></button>
    <button class="close-popup" id="close-reading-log-popup"><i class="fas fa-chevron-down"></i></button>
    <h3>阅读记录</h3>
    <ul id="tasks"></ul>
    <button class="add-task-btn" id="add-task-btn"><i class="fas fa-plus"></i> 阅读任务</button>
  </div>

  <div class="popup" id="add-task-popup">
    <button class="heng-a"></button>
    <button class="close-popup" id="close-add-task-popup"><i class="fas fa-chevron-down"></i></button>
    <h3>阅读任务</h3>
    <div class="flex-container1">
      <input type="text" class="task-input" id="task-input" placeholder="阅读任务名称">
      <button class="save-task-btn" id="save-task-btn">保存</button>
    </div>
  </div>


  <template class="subtask-list-template" id="subtask-list-template">
    <ul class="subtasks"></ul>
    <button class="add-subtask-btn"><i class="fas fa-plus"></i> 阅读记录</button>
  </template>

  <!-- 新增子任务弹窗 -->
  <div class="popup" id="add-subtask-popup">
    <button class="heng-a"></button>
    <button class="close-popup" id="close-add-subtask-popup"><i class="fas fa-chevron-down"></i></button>
    <h3>阅读记录</h3>
    <div class="flex-container">
      <select class="subtask-time" id="subtask-time">
        <option value="早">早</option>
        <option value="中">中</option>
        <option value="晚">晚</option>
      </select>
      <input class="subtask-num" type="number" id="subtask-num" placeholder="数量">
      <button class="save-subtask-btn" id="save-subtask-btn">保存</button>
    </div>
  </div>

  <!-- ----------------------- -->

  <div class="timer-popup" id="timer-popup">
    <button class="heng-a"></button>
    <button class="close-popup" id="close-popup"><i class="fas fa-chevron-down"></i></button>
    <div class="timer-container">
      <div class="timer-ring"></div>
      <span class="timer" id="timer">00:00:00</span>
    </div>


    <div>
      <button class="timer-btn1" id="toggle-timer">开 始</button>
    </div>
    <div>
      <button class="timer-btn2" id="reset-timer">归零</button>
    </div>
  </div>
  <div class="overlay" id="overlay"></div>

  <div class="title1" onclick="refreshList()">My Notes</div>

  <button class="delete-all-btn"><i class="far fa-trash-alt"></i></button>
  <button class="copy-all-btn"><i class="far fa-clone"></i></button>

  <div class="confirm-dialog">
    <div class="confirm-content">
      <div class="confirm-message">将删除全部笔记，数据无法恢复。确定继续删除？</div>
      <div class="confirm-buttons">
        <button class="confirm-btn confirm-yes-btn">Yes</button>
        <button class="confirm-btn confirm-no-btn">No</button>
      </div>
    </div>
  </div>
  <div class="container">
    <textarea class="input-box" id="input-box" placeholder="Add a new note here..." onkeypress="return "
      onfocus="showBackBtn()" onblur="hideBackBtn()"></textarea>
  </div>
  <button class="send-btn" id="send-btn">发送</button>

  <div class="edit-container"> <!-- 新增 -->
    <textarea class="edit-box" oninput="autoHeight(this)"></textarea>

    <button class="save-btn">保存</button>
  </div>
  <button class="tag-btn1"><i class="fas fa-hashtag"></i></button><!-- 井号 -->
  <button class="tag-btn2"><i class="far fa-check-square"></i></button><!-- 待办 -->



  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
  <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
    integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
  <button class="back-btn"><i class="fas fa-arrow-left"></i></button>
  <div class="note-count" onclick="showNoteCount()">Total: <span id="note-count">0</span></div>
  <button class="tag-btn"><i class="fas fa-tags"></i></button>
  <button class="open-popup" id="open-popup"><i class="far fa-clock"></i></button>
  <div class="tag-window">
    <div class="tag-window-content">
      <!-- 可滚动内容 -->
    </div>
    <div class="tag-window-footer">
      <button class="tag-window-close-btn1"><i class="fas fa-chevron-up"></i></button>
      <button class="tag-window-close-btn"><i class="fas fa-arrow-left"></i> 全部</button>

      <button class="tag-window-close-btn2"></button>
    </div>
  </div>

  <button class="icon-btn"><i class="far fa-grin-wink"></i></button>

  <button class="completedlist-btn load-completedlist-btn"><i class="far fa-calendar-check"></i></button>
  <div class="completedlist-dialog">

    <button class="close-completedlist-dialog-btn"><i class="fas fa-chevron-down"></i></button>
    <button class="completed-title">已完成事项</button>
    <div class="completedlist-content">
      <div class="completedlist-items"></div>
    </div>
  </div>

  <div class="tag-window1">
    <div class="tag-window-content1">
      <button class="btn btn1">🌈</button>
      <button class="btn btn2">🥇</button>
      <button class="btn btn4">🔥</button>
      <button class="btn btn5">☕</button>
      <button class="btn btn6">🍟</button>
      <button class="btn btn7">✔️</button>
      <button class="btn btn8">⚡</button>
      <button class="btn btn9">💡</button>
      <button class="btn btn10">⛅</button>
      <button class="btn btn11">🌩️</button>
      <button class="btn btn12">🚇</button>
      <button class="btn btn13">🍕</button>
      <button class="btn btn14">🎯</button>
      <button class="btn btn15">🚀</button>
      <button class="btn btn16">⌚</button>
      <button class="btn btn17">⏰</button>
      <button class="btn btn18">⚔️</button>
      <button class="btn btn19">😂</button>
      <button class="btn btn20">🐰</button>
      <button class="btn btn21">🌰</button>
      <button class="btn btn22">⭐</button>
      <button class="btn btn23">end</button>
    </div>
  </div>
  <script>
    // 获取目标跟踪按钮和弹窗元素
    const openModalBtn = document.getElementById('openModal');
    const modal = document.getElementById('myModal');

    const readingPopup = document.getElementById('reading-log-popup');
    const headerC1 = document.getElementById('headerC');
    const closeModalBtn = document.getElementById('closeModal');

    // 打开弹窗
    openModalBtn.addEventListener('click', () => {

      document.getElementById("myModal").classList.add("show");
      modal.style.transform = 'translateY(0%)';
    });

    // 关闭弹窗
    closeModalBtn.addEventListener('click', () => {
      document.getElementById("myModal").classList.remove("show");
      modal.style.transform = 'translateY(100%)';
    });

    // 点击弹窗外部时关闭弹窗
    document.addEventListener('click', function (event) {
      var modal = document.getElementById("myModal");
      if (event.target === modal) {
        modal.classList.remove("show");
        modal.style.transform = 'translateY(100%)';
      }
    });





    const task1Input1 = document.getElementById('task1-input1');
    const saveBtnC = document.getElementById('save-btnC');
    const task1List1 = document.getElementById('task1-list1');

    const overlayC = document.getElementById('overlayC');

    saveBtnC.addEventListener('click', saveTaskC);

    function saveTaskC() {
      if (task1Input1.value.trim() !== '') {
        const task1 = {
          id: Date.now(),
          text: task1Input1.value,
          date: new Date(),
          status: "未完成",
          subtask1s11: [],
          completedSubtask1s1: 0 // 添加completedSubtask1s1属性
        };

        const task1s1 = getTasksFromLocalStorage();
        task1s1.unshift(task1);
        localStorage.setItem('task1s1', JSON.stringify(task1s1));

        task1Input1.value = '';
        renderTasks();

      }
    }

    function renderTasks() {
      task1List1.innerHTML = '';
      const task1s1 = getTasksFromLocalStorage();
      // 添加以下代码以显示任务数量
      const totalCount = task1s1.length;
      const unfinishedCount = task1s1.filter(task1 => task1.status === '未完成').length;
      const finishedCount = task1s1.filter(task1 => task1.status === '已完成').length;
      document.getElementById('total-count').innerHTML = `已记录：<span class="total-number">${totalCount}</span> 天`;
      document.getElementById('unfinished-count').innerHTML = `自律失败：<span class="unfinished-number">${unfinishedCount}</span> 天`;
      document.getElementById('finished-count').innerHTML = `成功执行：<span class="finished-number">${finishedCount}</span> 天`;


      // 在这里计算累加值
      const currentMonth = new Date().getMonth();
      const currentYear = new Date().getFullYear();
      const monthlySum = task1s1.filter(task1 => new Date(task1.date).getMonth() === currentMonth && new Date(task1.date).getFullYear() === currentYear).reduce((sum, task1) => sum + task1.completedSubtask1s1, 0);
      const totalSum = task1s1.reduce((sum, task1) => sum + task1.completedSubtask1s1, 0);

      // 在这里显示累加值
      document.getElementById('monthly-sum').innerHTML = `本月完成：<span class="monthly-number">${monthlySum}</span> 项`;
      document.getElementById('total-sum').innerHTML = `共完成：<span class="total-number">${totalSum}</span> 项`;

      task1s1.forEach(task1 => {


        const li = document.createElement('li');
        li.classList.add('task1-item');
        li.dataset.id = task1.id;

        const date = new Date(task1.date);
        const formattedDate = `${date.toLocaleString('zh-CN', {
          year: 'numeric',
          month: 'long',
          day: 'numeric'
        })} ${date.toLocaleString('zh-CN', { weekday: 'long' })}`;


        li.innerHTML += `
<span class="task1-date">${formattedDate}</span>
<select class="task1-status" data-task1-id="${task1.id}">
<option value="未完成" ${task1.status === "未完成" ? "selected" : ""}>未完成</option>
<option value="已完成" ${task1.status === "已完成" ? "selected" : ""}>已完成</option>
</select>`;

        const countWrapper = document.createElement('div');
        countWrapper.classList.add('count-wrapper');

        const subtask1Count = document.createElement('div');
        subtask1Count.classList.add('subtask1-count');
        subtask1Count.innerText = `待完成：${task1.subtask1s11.length} 项`;
        countWrapper.appendChild(subtask1Count);

        const completedCount = document.createElement('div');
        completedCount.classList.add('completed-count');
        completedCount.innerText = `今日已完成：${task1.completedSubtask1s1} 项`;
        countWrapper.appendChild(completedCount);

        li.appendChild(countWrapper);

        li.innerHTML += `
<span class="task1-text">${task1.text}</span>
`;

        const task1StatusDropdown = li.querySelector('.task1-status');
        task1StatusDropdown.addEventListener('change', (e) => {
          const task1Id = e.target.getAttribute('data-task1-id');
          const task1s1 = getTasksFromLocalStorage();
          const task1Index = task1s1.findIndex((t) => t.id === parseInt(task1Id));
          task1s1[task1Index].status = e.target.value;
          localStorage.setItem('task1s1', JSON.stringify(task1s1));
          renderTasks();
        });

        const deleteBtn = document.createElement('button');
        deleteBtn.classList.add('delete-btnC');
        deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>';
        li.appendChild(deleteBtn);


        deleteBtn.addEventListener('click', () => {
          const confirmed = confirm('确定删除该待办任务吗？');
          if (confirmed) {
            const task1Index = task1s1.findIndex(t => t.id === task1.id);
            task1s1.splice(task1Index, 1);
            localStorage.setItem('task1s1', JSON.stringify(task1s1));
            renderTasks();
          }
        });

        const subtask1Wrapper = document.createElement('div');
        subtask1Wrapper.classList.add('subtask1-wrapper');

        task1.subtask1s11.forEach(subtask1 => {
          const subtask1El = document.createElement('div');
          subtask1El.classList.add('subtask1');
          subtask1El.innerText = subtask1.text;

          const buttonWrapper = document.createElement('div');
          buttonWrapper.style.display = 'inline-flex';

          // 添加复制按钮及图标
          const completeBtn = document.createElement('button');
          completeBtn.classList.add('complete-btnC');
          const completeIcon = document.createElement('i');
          completeIcon.classList.add('fas', 'fa-check');
          completeBtn.appendChild(completeIcon);
          buttonWrapper.appendChild(completeBtn);

          const copyBtn = document.createElement('button');
          copyBtn.classList.add('copy-btn');
          copyBtn.innerHTML = '<i class="fas fa-plus"></i>';
          buttonWrapper.appendChild(copyBtn);


          const deleteBtn = document.createElement('button');
          deleteBtn.classList.add('delete-btnC');
          deleteBtn.innerHTML = '<i class="fas fa-trash-alt"></i>';
          buttonWrapper.appendChild(deleteBtn);

          subtask1El.appendChild(buttonWrapper);


          deleteBtn.addEventListener('click', () => {
            const subtask1Index = task1.subtask1s11.findIndex(s => s.id === subtask1.id);
            task1.subtask1s11.splice(subtask1Index, 1);

            const task1s1 = getTasksFromLocalStorage();
            const task1Index = task1s1.findIndex(t => t.id === task1.id);
            task1s1[task1Index] = task1;
            localStorage.setItem('task1s1', JSON.stringify(task1s1));

            renderTasks();
          });

          completeBtn.addEventListener('click', () => {
            task1.completedSubtask1s1 += 1;
            const subtask1Index = task1.subtask1s11.findIndex(s => s.id === subtask1.id);
            task1.subtask1s11.splice(subtask1Index, 1);

            const task1s1 = getTasksFromLocalStorage();
            const task1Index = task1s1.findIndex(t => t.id === task1.id);
            task1s1[task1Index] = task1;
            localStorage.setItem('task1s1', JSON.stringify(task1s1));

            renderTasks();

            // 在这里调用 showToast 函数
            showToast('🏅阅读完成 + 1', 1000);
          });


          // 新增 showToast 函数
          function showToast(message, duration) {
            const toast = document.createElement('div');
            toast.innerText = message;
            toast.style.position = 'fixed';
            toast.style.left = '50%';
            toast.style.bottom = '70%';
            toast.style.transform = 'translateX(-50%)';
            toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
            toast.style.color = 'white';
            toast.style.padding = '10px 20px';
            toast.style.borderRadius = '5px';
            toast.style.zIndex = '1001';
            document.body.appendChild(toast);

            setTimeout(() => {
              toast.remove();
            }, duration);
          }


          copyBtn.addEventListener('click', () => {
            const newSubtask1 = {
              id: Date.now(),
              text: subtask1.text
            };

            const task1s1 = getTasksFromLocalStorage();
            const task1Index = task1s1.findIndex(t => t.id === task1.id);
            task1s1[task1Index].subtask1s11.push(newSubtask1);
            localStorage.setItem('task1s1', JSON.stringify(task1s1));

            renderTasks();

            // 在这里调用 showToast 函数
            showToast('任务复制成功', 1000);
          });

          subtask1Wrapper.appendChild(subtask1El);
        });
        li.appendChild(subtask1Wrapper);

        // 添加日志按钮
        const logBtn = document.createElement('button');
        logBtn.classList.add('log-btn');
        logBtn.innerHTML = '<i class="fab fa-pied-piper-square"></i>';


        // 添加日志按钮点击事件
        logBtn.addEventListener('click', () => {
          Swal.fire({
            title: '<span style="font-size: 20px">写复盘</span>',
            input: 'text',
            inputAttributes: {
              autocapitalize: 'off'
            },
            showCancelButton: true,
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            
            customClass: {
              input: 'swal-input',
              confirmButton: 'swal-button',
              cancelButton: 'swal-button'
            },
            width: 500,
            padding: '1rem',
            borderRadius: '20px', // 添加这一行
            background: '#fff',
            fontSize: '19px',
            inputValidator: (value) => {
              if (!value || value.trim() === '') {
                return '请输入复盘内容';
              }
            }
          }).then((result) => {
            if (result.isConfirmed) {
              const logText = result.value.trim();
              const log = {
                id: Date.now(),
                text: logText
              };

              const task1s1 = getTasksFromLocalStorage();
              const task1Index = task1s1.findIndex(t => t.id === task1.id);
              if (!task1s1[task1Index].logs) {
                task1s1[task1Index].logs = [];
              }
              task1s1[task1Index].logs.push(log);
              localStorage.setItem('task1s1', JSON.stringify(task1s1));

              renderTasks();
            }
          });
        });

        const logList = document.createElement('ul');
        logList.classList.add('log-list');
        logList.style.listStyleType = 'none';

        if (task1.logs && task1.logs.length > 0) {
          logList.classList.remove('no-logs');
        } else {
          logList.classList.add('no-logs');
        }

        (task1.logs || []).forEach(log => {
          const logItem = document.createElement('li');

          logItem.classList.add('log-item');
          logItem.innerText = log.text;

          const logLabel = document.createElement('span');
          logLabel.classList.add('log-label');
          logLabel.innerText = '复盘●反思';
          logItem.insertBefore(logLabel, logItem.firstChild);


          logList.appendChild(logItem);



          const deleteLogBtn = document.createElement('button');
          deleteLogBtn.classList.add('delete-log-btn');
          deleteLogBtn.innerHTML = '<i class="far fa-trash-alt"></i>';
          logItem.appendChild(deleteLogBtn);

          const editLogBtn = document.createElement('button');
          editLogBtn.classList.add('edit-log-btn');
          editLogBtn.innerHTML = '<i class="fas fa-edit"></i>';
          logItem.appendChild(editLogBtn);

          editLogBtn.addEventListener('click', () => {
            Swal.fire({
              title: '<span style="font-size: 20px">编辑复盘</span>',
              input: 'text',
              inputValue: log.text,
              inputPlaceholder: '请编辑复盘',
              showCancelButton: true,
              cancelButtonText: '取消',
              confirmButtonText: '保存',
              
              width: '500px',
              fontSize: '19px',
            }).then((result) => {
              if (result.isConfirmed && result.value.trim() !== '') {
                const newLogText = result.value.trim();
                const task1s1 = getTasksFromLocalStorage();
                const task1Index = task1s1.findIndex(t => t.id === task1.id);
                const logIndex = task1s1[task1Index].logs.findIndex(l => l.id === log.id);
                task1s1[task1Index].logs[logIndex].text = newLogText;
                localStorage.setItem('task1s1', JSON.stringify(task1s1));
                renderTasks();
              }
            });
          });


          deleteLogBtn.addEventListener('click', () => {
            const task1s1 = getTasksFromLocalStorage();
            const task1Index = task1s1.findIndex(t => t.id === task1.id);
            task1s1[task1Index].logs = task1s1[task1Index].logs.filter(l => l.id !== log.id);
            localStorage.setItem('task1s1', JSON.stringify(task1s1));

            renderTasks();
          });
        });

        li.appendChild(logList);
        li.appendChild(logBtn);
        task1List1.appendChild(li);

        // 修改这里：将“新增子任务”按钮从 innerHTML 移到 createElement 阅读任务
        const subtask1Btn = document.createElement('button');
        subtask1Btn.classList.add('subtask1-btn');
        subtask1Btn.innerHTML = '<i class="fas fa-plus"></i>';
        li.appendChild(subtask1Btn);

        // 修改这里：添加事件监听器到 subtask1Btn，而不是 li.querySelector('.subtask1-btn')
        subtask1Btn.addEventListener('click', () => {
          Swal.fire({
            title: '<span style="font-size: 20px">子任务</span>',
            input: 'text',
            inputAttributes: {
              autocapitalize: 'off'
            },
            showCancelButton: true,
            cancelButtonText: '取消',
            confirmButtonText: '确认',
            
            customClass: {
              input: 'swal-input',
              cancelButton: 'swal-button',
              confirmButton: 'swal-button'
              
            },
            width: 500,
            padding: '10px',
            borderRadius: '8px',
            background: '#fff',
            fontSize: '19px',
            inputValidator: (value) => {
              if (!value || value.trim() === '') {
                return '请输入子任务';
              }
            }
          }).then((result) => {
            if (result.isConfirmed) {
              const subtask1 = {
                id: Date.now(),
                text: result.value
              };

              const task1s1 = getTasksFromLocalStorage();
              const task1Index = task1s1.findIndex(t => t.id === task1.id);
              task1s1[task1Index].subtask1s11.push(subtask1);
              localStorage.setItem('task1s1', JSON.stringify(task1s1));

              renderTasks();
            }
          });
        });



      });
      window.scrollTo(0, document.body.scrollHeight);
    }


    function getTasksFromLocalStorage() {
      return JSON.parse(localStorage.getItem('task1s1')) || [];
    }

    renderTasks();
    // 添加这一行使页面在加载后滚动到底部
    window.scrollTo(0, document.body.scrollHeight);

    // --------------------------------------读书记录


    window.addEventListener('DOMContentLoaded', loadTasks);

    // 在 JavaScript 中添加事件监听器和处理函数
    document.getElementById("open-reading-log").addEventListener("click", openReadingLog);
    document.getElementById("close-reading-log-popup").addEventListener("click", closeReadingLog);
    document.getElementById("add-task-btn").addEventListener("click", openAddTask);
    document.getElementById("close-add-task-popup").addEventListener("click", closeAddTask);
    document.getElementById("save-task-btn").addEventListener("click", saveTask);

    function openReadingLog() {
      document.getElementById("overlay").style.display = "block";
      document.getElementById("reading-log-popup").classList.add("show");
      readingPopup.style.transform = 'translateY(0%)';
      loadTasks();
      setTimeout(() => {
        document.getElementById("tasks").scrollTop = document.getElementById("tasks").scrollHeight;
      }, 100);
    }


    function closeReadingLog() {
      document.getElementById("overlay").style.display = "none";
      document.getElementById("reading-log-popup").classList.remove("show");
      readingPopup.style.transform = 'translateY(100%)';
    }

    function openAddTask() {
      document.getElementById("add-task-popup").classList.add("show");
    }

    function closeAddTask() {
      document.getElementById("add-task-popup").classList.remove("show");
    }

    function saveTask() {
      const taskInput = document.getElementById("task-input");
      const taskName = taskInput.value.trim();
      if (taskName) {
        const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
        tasks.push({ name: taskName, subtasks: [] }); // 添加一个包含空子任务数组的任务对象
        localStorage.setItem("tasks", JSON.stringify(tasks));
        taskInput.value = "";
        closeAddTask();
        loadTasks();
      }
    }

    function openAddSubtaskPopup(task, li) {
      document.getElementById("overlay").style.display = "block";
      document.getElementById("add-subtask-popup").classList.add("show");

      const saveSubtaskBtn = document.getElementById("save-subtask-btn");

      // 移除之前的事件监听器
      const clone = saveSubtaskBtn.cloneNode(true);
      saveSubtaskBtn.parentNode.replaceChild(clone, saveSubtaskBtn);

      // 添加新的事件监听器
      clone.addEventListener("click", function () {
        addSubtask(task, li);
      });
    }
    function calculateSubtaskDifference(task, subtaskContent, subtaskLi, subtaskIndex) {
      const prevSubtaskNum = subtaskIndex > 0 ? parseInt(task.subtasks[subtaskIndex - 1].match(/(\d+)页$/)?.[0] || 0) : 0;
      const currentSubtaskNumMatch = subtaskContent.match(/(\d+)页$/);
      if (currentSubtaskNumMatch) {
        const currentSubtaskNum = parseInt(currentSubtaskNumMatch[0]);
        const difference = currentSubtaskNum - prevSubtaskNum;

        const differenceSpan = document.createElement("span");
        differenceSpan.textContent = ` (${difference > 0 ? '+' : ''}${difference})`;
        subtaskLi.appendChild(differenceSpan);
      }
    }
    function bindDeleteSubtaskBtn(deleteBtn, task, subtaskIndex) {
      deleteBtn.addEventListener("click", () => {
        deleteSubtask(task, subtaskIndex);
        loadTasks();
      });
    }
    function deleteSubtask(task, subtaskIndex) {
      task.subtasks.splice(subtaskIndex, 1);
      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
      const taskIndex = tasks.findIndex(t => t.name === task.name);
      tasks[taskIndex] = task;
      localStorage.setItem("tasks", JSON.stringify(tasks));
    }

    function loadTasks() {
      const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
      const tasksList = document.getElementById("tasks");
      tasksList.innerHTML = "";
      tasks.forEach(task => {

        const li = document.createElement("li");
        li.textContent = task.name;

        const deleteTaskBtn = document.createElement("button");
        deleteTaskBtn.classList.add("delete-task-btn");
        deleteTaskBtn.innerHTML = '<i class="fas fa-trash-alt"></i>';
        li.appendChild(deleteTaskBtn);


        const subtaskListTemplate = document.getElementById("subtask-list-template");
        const subtaskListFragment = document.importNode(subtaskListTemplate.content, true);
        li.appendChild(subtaskListFragment);

        if (task.subtasks) {
          const subtaskList = li.querySelector(".subtasks");


          task.subtasks.forEach((subtaskContent, index) => {
            const subtaskLi = document.createElement("li");
            const subtaskContentSpan = document.createElement("span");
            subtaskContentSpan.textContent = subtaskContent;
            subtaskLi.appendChild(subtaskContentSpan);
            calculateSubtaskDifference(task, subtaskContent, subtaskLi, index);

            const deleteBtn = document.createElement("button");
            deleteBtn.className = "delete-subtaskbtn";


            const trashIcon = document.createElement("i");
            trashIcon.className = "fas fa-trash-alt";

            deleteBtn.appendChild(trashIcon);

            bindDeleteSubtaskBtn(deleteBtn, task, index);

            subtaskLi.appendChild(deleteBtn);
            subtaskList.appendChild(subtaskLi);
          });






        }


        const addSubtaskBtn = li.querySelector(".add-subtask-btn");

        // 检查按钮是否已经绑定了事件监听器，如果已绑定，则先移除
        if (addSubtaskBtn.hasAttribute("data-bound")) {
          addSubtaskBtn.removeEventListener("click", addSubtaskBtn.listener);
          addSubtaskBtn.removeAttribute("data-bound");
        }

        // 为当前任务绑定新的事件监听器
        addSubtaskBtn.addEventListener("click", ((currentTask, currentLi) => {
          return () => openAddSubtaskPopup(currentTask, currentLi);
        })(task, li));

        // 将新的事件监听器与按钮关联，并将其标记为已绑定
        addSubtaskBtn.listener = addSubtaskBtn.onclick;
        addSubtaskBtn.setAttribute("data-bound", "true");
        tasksList.appendChild(li);

        deleteTaskBtn.addEventListener("click", () => {
          if (confirm("确定要删除本书的阅读记录吗？")) {
            const index = tasks.findIndex(t => t.name === task.name);
            tasks.splice(index, 1);
            localStorage.setItem("tasks", JSON.stringify(tasks));
            loadTasks();
          }
        });


      });


    };


    document.getElementById("close-add-subtask-popup").addEventListener("click", function () {

      document.getElementById("add-subtask-popup").classList.remove("show");
      document.getElementById("subtask-time").selectedIndex = 0;
      document.getElementById("subtask-num").value = "";
    });

    function addSubtask(task, li) {
      const currentDate = new Date().toISOString().slice(0, 10);
      const subtaskTime = document.getElementById("subtask-time").value;
      const subtaskNum = document.getElementById("subtask-num").value.trim();
      if (subtaskNum) {
        const subtaskList = li.querySelector(".subtasks");
        const subtaskContent = `${currentDate} ${subtaskTime} • 读到 ${subtaskNum}页`;
        const subtaskLi = document.createElement("li");
        const subtaskContentSpan = document.createElement("span");
        subtaskContentSpan.textContent = subtaskContent;
        subtaskLi.appendChild(subtaskContentSpan);

        // 获取前一个子任务列表
        const prevSubtasks = task.subtasks;

        // 先计算差值再添加到DOM
        calculateSubtaskDifference(task, subtaskContent, subtaskLi, prevSubtasks.length);

        const deleteBtn = document.createElement("button");
        deleteBtn.className = "delete-subtaskbtn";


        const trashIcon = document.createElement("i");
        trashIcon.className = "far fa-trash-alt";

        deleteBtn.appendChild(trashIcon);

        bindDeleteSubtaskBtn(deleteBtn, task, task.subtasks.length);


        subtaskLi.appendChild(deleteBtn);

        subtaskList.appendChild(subtaskLi);

        // 将子任务添加到任务对象的子任务数组中，并更新localStorage
        task.subtasks.push(subtaskContent);
        const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
        const taskIndex = tasks.findIndex(t => t.name === task.name);
        tasks[taskIndex] = task;
        localStorage.setItem("tasks", JSON.stringify(tasks));


        document.getElementById("add-subtask-popup").classList.remove("show");
        document.getElementById("subtask-time").selectedIndex = 0;
        document.getElementById("subtask-num").value = "";
      }
      setTimeout(() => {
        document.getElementById("tasks").scrollTop = document.getElementById("tasks").scrollHeight;
      }, 100);
    }





    // --------------------------计时器
    const openPopupBtn = document.getElementById('open-popup');
    const closePopupBtn = document.getElementById('close-popup');
    const timerPopup = document.getElementById('timer-popup');
    const timerElement = document.getElementById('timer');
    const resetBtn = document.getElementById('reset-timer');

    window.addEventListener('load', () => {
      if (localStorage.getItem('seconds')) {
        seconds = parseInt(localStorage.getItem('seconds'));
        updateTimer();
      }
    });

    // 当页面加载时，检查localStorage中的弹窗状态
    window.addEventListener('load', () => {
      if (localStorage.getItem('popupOpen') === 'true') {
        timerPopup.classList.add('show');
        overlay.style.display = 'block';
      } else {
        timerPopup.classList.remove('show');
        overlay.style.display = 'none';
      }
    });

    window.addEventListener('load', () => {
      if (localStorage.getItem('timerRunning') === 'true') {
        startTimer();
      }
    });


    const timerRing = document.querySelector(".timer-ring");
    openPopupBtn.addEventListener('click', () => {
      timerPopup.classList.add('show');

    });

    closePopupBtn.addEventListener('click', () => {
      timerPopup.classList.remove('show');
      overlay.style.display = 'none';

      localStorage.setItem('popupOpen', 'false');
      clearInterval(timer);
      paused = true;
      toggleBtn.innerText = '开 始';
      timerRing.style.animationPlayState = "paused";
      // 将计时器状态存储到localStorage
      localStorage.setItem('timerRunning', 'false');
    });


    document.getElementById("overlay").addEventListener("click", closeAllPopups);

    function closeAllPopups() {
      closeReadingLog();
      closeAddTask();
      closeAddSubtask();
      timerPopup.classList.remove('show');

      timerPopup.style.transform = 'translateY(100%)';
      localStorage.setItem('popupOpen', 'false');



      clearInterval(timer);
      paused = true;
      toggleBtn.innerText = '开 始';
      timerRing.style.animationPlayState = "paused";
      // 将计时器状态存储到localStorage
      localStorage.setItem('timerRunning', 'false');
    }
    function closeAddSubtask() {
      document.getElementById("add-subtask-popup").classList.remove("show");
    }

    let timer;
    let seconds = 0;
    let paused = true;

    const toggleBtn = document.getElementById('toggle-timer');

    toggleBtn.addEventListener('click', () => {
      if (paused) {
        timer = setInterval(() => {
          if (seconds < 24 * 60 * 60) {
            seconds++;
            updateTimer();
            localStorage.setItem('seconds', seconds);
          }
        }, 1000);
        paused = false;
        toggleBtn.innerText = '暂 停';
        timerRing.style.animationPlayState = "running";
        localStorage.setItem('timerRunning', 'true');
      } else {
        clearInterval(timer);
        paused = true;
        toggleBtn.innerText = '开 始';
        timerRing.style.animationPlayState = "paused";
        // 将计时器状态存储到localStorage
        localStorage.setItem('timerRunning', 'false');
      }
    });



    resetBtn.addEventListener('click', () => {
      clearInterval(timer);
      seconds = 0;
      updateTimer();
      paused = true;
      timerRing.style.animationPlayState = "paused";
      localStorage.setItem('seconds', seconds);
      localStorage.setItem('timerRunning', 'false');
    });

    function updateTimer() {
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const remainingSeconds = seconds % 60;
      timerElement.innerText = `${formatTime(hours)}:${formatTime(minutes)}:${formatTime(remainingSeconds)}`;
    }
    function formatTime(value) {
      return value.toString().padStart(2, '0');
    }

    const overlay = document.getElementById('overlay');

    // 在打开弹窗的事件监听器中，将弹窗状态存储到localStorage
    openPopupBtn.addEventListener('click', () => {
      timerPopup.classList.add('show');
      overlay.style.display = 'block';
      timerPopup.style.transform = 'translateY(0%)';
      localStorage.setItem('popupOpen', 'true');
    });

    // 在关闭弹窗的事件监听器中，将弹窗状态存储到localStorage
    closePopupBtn.addEventListener('click', () => {
      timerPopup.classList.remove('show');
      overlay.style.display = 'none';
      timerPopup.style.transform = 'translateY(100%)';
      localStorage.setItem('popupOpen', 'false');
    });

    // 刷新后读取
    function startTimer() {
      if (!paused) return;
      timer = setInterval(() => {
        if (seconds < 24 * 60 * 60) {
          seconds++;
          updateTimer();
          localStorage.setItem('seconds', seconds);
        }
      }, 1000);
      paused = false;
      toggleBtn.innerText = '暂 停';
      timerRing.style.animationPlayState = 'running';

      // 将计时器状态存储到localStorage
      localStorage.setItem('timerRunning', 'true');
    }


    let touchStartY = 0;

    function onTouchStart(event) {
      touchStartY = event.touches[0].clientY;
      timerPopup.classList.add('timer-popup-dragging');
    }

    function onTouchMove(event) {
      const touchMoveY = event.touches[0].clientY;
      const dragDistance = touchMoveY - touchStartY;

      if (dragDistance > 0) {
        timerPopup.style.transform = `translateY(${dragDistance}px)`;
      }
    }

    function onTouchEnd() {
      const threshold = window.innerHeight / 28;
      const translateY = parseInt(timerPopup.style.transform.slice(11));

      if (translateY > threshold) {


        clearInterval(timer);
        paused = true;
        toggleBtn.innerText = '开 始';
        timerRing.style.animationPlayState = "paused";
        // 将计时器状态存储到localStorage
        localStorage.setItem('timerRunning', 'false');

        timerPopup.classList.remove('show');
        timerPopup.style.transform = 'translateY(100%)';
        overlay.style.display = 'none';
        localStorage.setItem('popupOpen', 'false');
      } else {
        timerPopup.style.transform = 'translateY(0%)';
      }

      timerPopup.classList.remove('timer-popup-dragging');
    }

    timerPopup.addEventListener('touchstart', onTouchStart);
    timerPopup.addEventListener('touchmove', onTouchMove);
    timerPopup.addEventListener('touchend', onTouchEnd);
    timerPopup.addEventListener('touchcancel', onTouchEnd);





    function onTouchStartC(event) {
      touchStartY = event.touches[0].clientY;
      timerPopup.classList.add('modal-dragging');
    }

    function onTouchMoveC(event) {
      const touchMoveY = event.touches[0].clientY;
      const dragDistance = touchMoveY - touchStartY;

      if (dragDistance > 0) {
        modal.style.transform = `translateY(${dragDistance}px)`;
      }
    }

    function onTouchEndC() {
      const threshold = window.innerHeight / 10;
      const translateY = parseInt(modal.style.transform.slice(11));

      if (translateY > threshold) {
        modal.classList.remove('show');
        modal.style.transform = 'translateY(100%)';
        overlay.style.display = 'none';

      } else {
        modal.style.transform = 'translateY(0%)';
      }

      modal.classList.remove('modal-dragging');
    }

    modal.addEventListener('touchstart', onTouchStartC);
    modal.addEventListener('touchmove', onTouchMoveC);
    modal.addEventListener('touchend', onTouchEndC);
    modal.addEventListener('touchcancel', onTouchEndC);




    function onTouchStartD(event) {
      touchStartY = event.touches[0].clientY;
      readingPopup.classList.add('reading-log-popup-dragging');
    }

    function onTouchMoveD(event) {
      const touchMoveY = event.touches[0].clientY;
      const dragDistance = touchMoveY - touchStartY;

      if (dragDistance > 0) {
        readingPopup.style.transform = `translateY(${dragDistance}px)`;
      }
    }

    function onTouchEndD() {
      const threshold = window.innerHeight / 10;
      const translateY = parseInt(readingPopup.style.transform.slice(11));

      if (translateY > threshold) {
        readingPopup.classList.remove('show');
        readingPopup.style.transform = 'translateY(100%)';
        overlay.style.display = 'none';

      } else {
        readingPopup.style.transform = 'translateY(0%)';
      }

      readingPopup.classList.remove('reading-log-popup-dragging');
    }

    readingPopup.addEventListener('touchstart', onTouchStartD);
    readingPopup.addEventListener('touchmove', onTouchMoveD);
    readingPopup.addEventListener('touchend', onTouchEndD);
    readingPopup.addEventListener('touchcancel', onTouchEndD);


    // --------------------------
    const inputBox = document.getElementById('input-box');
    const sendBtn = document.querySelector('.send-btn');
    const copyAllBtn = document.querySelector('.copy-all-btn');
    const deleteAllBtn = document.querySelector('.delete-all-btn');
    const confirmDialog = document.querySelector('.confirm-dialog');
    const confirmYesBtn = document.querySelector('.confirm-yes-btn');
    const confirmNoBtn = document.querySelector('.confirm-no-btn');
    const confirmBackdrop = confirmDialog.querySelector('.confirm-content');
    const noteCount = document.getElementById('note-count');
    function updateNoteCount() {
      noteCount.textContent = noteList.children.length;
    }

    window.addEventListener('load', updateNoteCount);



    const tagWindow1 = document.querySelector(".tag-window1");


    const btn1 = document.querySelector(".btn1");
    btn1.addEventListener("click", function () {
      insertTextAtCursor("🌈");

    });
    const btn2 = document.querySelector(".btn2");
    btn2.addEventListener("click", function () {
      insertTextAtCursor("🥇");

    });

    const iconBtn = document.querySelector('.icon-btn');


    iconBtn.addEventListener('click', () => {


      if (tagWindow1.style.display === "block") {

        setTimeout(() => {
          inputBox.focus();
          tagWindow1.style.display = "none";
          iconBtn.style.display = 'block';
        }, 1);
        inputBox.focus();
        iconBtn.style.display = 'block';
      } else {
        setTimeout(() => {
          inputBox.focus();
          tagWindow1.style.display = "block";
          iconBtn.style.display = 'block';
        }, 1);
        inputBox.focus();
        iconBtn.style.display = 'block';
      }

    });



    inputBox.addEventListener("focus", function () {// 显示tagWindow1

    });
    inputBox.addEventListener("blur", function () { // 隐藏tagWindow1
      setTimeout(function () {
        if (!tagWindow1.contains(document.activeElement)) {
          tagWindow1.style.display = "none";
        }
      }, 0);
    });
    function insertTextAtCursor(text) {// 插入文本
      setTimeout(() => {
        const start = inputBox.selectionStart;
        const end = inputBox.selectionEnd;
        inputBox.value =
          inputBox.value.substring(0, start) + text + inputBox.value.substring(end, inputBox.value.length);
        inputBox.selectionStart = inputBox.selectionEnd = start + text.length;

        inputBox.focus();
        tagWindow1.style.display = "block";
        iconBtn.style.display = 'block';
      }, 1);
      inputBox.focus();
      tagWindow1.style.display = "block";
      iconBtn.style.display = 'block';
    }
    // 绑定事件
    const btn4 = document.querySelector(".btn4");
    btn4.addEventListener("click", function () {
      insertTextAtCursor("🔥");
    });

    const btn5 = document.querySelector(".btn5");
    btn5.addEventListener("click", function () {
      insertTextAtCursor("☕");
    });

    const btn6 = document.querySelector(".btn6");
    btn6.addEventListener("click", function () {
      insertTextAtCursor("🍟");
    });

    const btn7 = document.querySelector(".btn7");
    btn7.addEventListener("click", function () {
      insertTextAtCursor("✔️");
    });

    const btn8 = document.querySelector(".btn8");
    btn8.addEventListener("click", function () {
      insertTextAtCursor("⚡");
    });

    const btn9 = document.querySelector(".btn9");
    btn9.addEventListener("click", function () {
      insertTextAtCursor("💡");
    });

    const btn10 = document.querySelector(".btn10");
    btn10.addEventListener("click", function () {
      insertTextAtCursor("⛅");
    });

    const btn11 = document.querySelector(".btn11");
    btn11.addEventListener("click", function () {
      insertTextAtCursor("🌩️");
    });

    const btn12 = document.querySelector(".btn12");
    btn12.addEventListener("click", function () {
      insertTextAtCursor("🚇");
    });

    const btn13 = document.querySelector(".btn13");
    btn13.addEventListener("click", function () {
      insertTextAtCursor("🍕");
    });

    const btn14 = document.querySelector(".btn14");
    btn14.addEventListener("click", function () {
      insertTextAtCursor("🎯");
    });

    const btn15 = document.querySelector(".btn15");
    btn15.addEventListener("click", function () {
      insertTextAtCursor("🚀");
    });

    const btn16 = document.querySelector(".btn16");
    btn16.addEventListener("click", function () {
      insertTextAtCursor("⌚");
    });

    const btn17 = document.querySelector(".btn17");
    btn17.addEventListener("click", function () {
      insertTextAtCursor("⏰");
    });

    const btn18 = document.querySelector(".btn18");
    btn18.addEventListener("click", function () {
      insertTextAtCursor("⚔️");
    });

    const btn19 = document.querySelector(".btn19");
    btn19.addEventListener("click", function () {
      insertTextAtCursor("😂");
    });

    const btn20 = document.querySelector(".btn20");
    btn20.addEventListener("click", function () {
      insertTextAtCursor("🐰");
    });

    const btn21 = document.querySelector(".btn21");
    btn21.addEventListener("click", function () {
      insertTextAtCursor("🌰");
    });

    const btn22 = document.querySelector(".btn22");
    btn22.addEventListener("click", function () {
      insertTextAtCursor("⭐");
    });

    const btn23 = document.querySelector(".btn23");
    btn23.addEventListener("click", function () {
      insertTextAtCursor("☁️");
    });





    const completedListBtn = document.querySelector('.load-completedlist-btn');
    const completedListDialog = document.querySelector('.completedlist-dialog');
    const completedListItems = completedListDialog.querySelector('.completedlist-items');
    const maskB = document.createElement('div');
    maskB.className = 'mask-b';
    document.body.appendChild(maskB);

    function loadCompletedList() {
      const completedList = JSON.parse(localStorage.getItem('completedList')) || [];
      const displayList = completedList.slice().reverse(); // 复制并倒序

      completedListItems.innerHTML = '';

      displayList.forEach((item) => {
        const listItem = document.createElement('div');
        listItem.style.position = 'relative'; // 设置为相对定位
        const itemText = document.createElement('span');
        itemText.innerHTML = item.replace(/\n/g, '<br>').replace(/#待办/g, '<span class="gray-dot"></span>');
        itemText.style.display = 'inline-block';
        itemText.style.verticalAlign = 'middle';
        itemText.style.marginRight = '10px';
        listItem.appendChild(itemText);

        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '删除';
        deleteBtn.style.position = 'absolute';
        deleteBtn.style.top = '0';
        deleteBtn.style.right = '2px';
        deleteBtn.style.backgroundColor = '#fff'; // 设置背景颜色
        deleteBtn.style.color = '#8f8ad4'; // 设置字体颜色
        deleteBtn.style.fontSize = '16px'; // 设置字体大小
        deleteBtn.style.border = '1px solid #a7a2e7'; // 设置边框颜色
        deleteBtn.style.borderRadius = '100px'; // 设置边框圆角
        deleteBtn.style.padding = '2px 10px 3px 13px ';
        deleteBtn.style.shadow = '0px 0px 15px #A1A1A1';

        deleteBtn.addEventListener('click', () => {
          // 删除列表项代码
          completedList.splice(completedList.indexOf(item), 1);
          localStorage.setItem('completedList', JSON.stringify(completedList));
          loadCompletedList();
        });
        listItem.appendChild(deleteBtn);
        completedListItems.appendChild(listItem);
      });

      maskB.addEventListener('click', () => {
        completedListDialog.style.display = 'none';
        maskB.style.display = 'none';
      });

      maskB.style.display = 'block';
      completedListDialog.style.display = 'block';
    }

    completedListBtn.addEventListener('click', loadCompletedList);

    const closeCompletedListDialogBtn = document.querySelector('.close-completedlist-dialog-btn');
    closeCompletedListDialogBtn.addEventListener('click', () => {
      completedListDialog.style.display = 'none';
      maskB.style.display = 'none';
    });







    const tagBtn = document.querySelector('.tag-btn');
    const tagWindow = document.querySelector('.tag-window');
    let startY;

    tagWindow.addEventListener('touchstart', (event) => {
      startY = event.touches[0].clientY;
    });

    tagWindow.addEventListener('touchmove', (event) => {
      const deltaY = event.touches[0].clientY - startY;
      if (deltaY < -200) { // 滑动距离大于50像素时触发收起操作
        hideTagWindow();
      }
    });

    tagWindow.addEventListener('touchend', (event) => {
      startY = null;
    });


    tagBtn.addEventListener('click', () => {
      tagWindow.style.display = 'block';
    });

    const hashtagRegex = /#\S+/g;

    const tagWindowContent = document.querySelector('.tag-window-content');

    tagBtn.addEventListener('click', function () {
      tagWindow.style.display = 'block';
    });

    function selectTag(tagElement) {
      const selected = tagElement.classList.contains('tag-selected');

      // 如果当前点击的标签是 "all" 标签，则切换选中状态，并恢复非当前选中的标签的样式
      if (tagElement.textContent === 'all') {
        const tagElements = document.querySelectorAll('.tag');
        tagElements.forEach(tag => {
          if (tag !== tagElement) {
            tag.classList.remove('tag-selected');
            tag.style.backgroundColor = '#5851B5';//选中all时的背景
            tag.style.color = '#fff';
            tag.style.border = '1px solid #5851B5';
            tag.style.borderRadius = '10px';
          }
        });
      } else {
        // 如果当前点击的标签不是 "all" 标签，则恢复非当前选中的标签的样式
        const tagElements = document.querySelectorAll('.tag');
        tagElements.forEach(tag => {
          if (tag !== tagElement) {
            tag.classList.remove('tag-selected');
            tag.style.backgroundColor = '#fff';// 未选中的背景
            tag.style.color = '#5851B5';
            tag.style.border = '1px solid #5851B5';
          }
        });
      }

      tagElement.style.backgroundColor = selected ? '#fff' : '#5851B5'; // 选中的背景
      tagElement.style.color = selected ? '#fff' : '#fff';
      tagElement.style.border = selected ? '1px solid #5851B5' : '1px solid #5851B5';

      tagElement.classList.toggle('tag-selected');
    }

    function showTagWindow() {
      const notes = document.querySelectorAll('.note-item');
      const tagSet = new Set();

      notes.forEach(note => {
        const matches = note.innerText.match(hashtagRegex);
        if (matches) {
          matches.forEach(match => {
            tagSet.add(match);
          });
        }
      });

      const tagArray = Array.from(tagSet); // 将Set转换为Array
      tagArray.sort().reverse(); // 将标签数组排序并倒序排列

      let tagText = '';
      tagText += `<span class="tag tag-selected" onclick="filterNotesByTag('all'); selectTag(this)" style="background-color: #5851B5; color: #fff;border:1px solid #5851B5;box-shadow: 2px 2px 15px #E4E4E4;font-size: 19px;">全部</span> `;
      tagSet.forEach(tag => {
        tagText += `<span class="tag" onclick="filterNotesByTag('${tag}'); selectTag(this)" style="background-color: #fff;border:1px solid #5851B5;color: #5851B5;box-shadow: 2px 2px 15px #E4E4E4";>${tag}</span> `;// 初始的背景
      });

      tagWindowContent.innerHTML = tagText;
      tagWindow.style.display = 'block';
    }

    function filterNotesByTag(tag) {
      const notes = document.querySelectorAll('.note-item');
      notes.forEach(note => {
        const tags = note.innerText.match(hashtagRegex);
        if (tag === 'all' || (tags && tags.includes(tag))) {
          note.style.display = 'block';
        } else {
          note.style.display = 'none';
        }
      });
    }

    function hideTagWindow() {
      filterNotesByTag('all');

      tagWindow.style.transform = 'translateY(-100%)';
      setTimeout(() => {
        tagWindow.style.display = 'none';
        tagWindow.style.transform = 'none';
      }, 300); // 300ms为动画持续时间
    }
    function hideTagWindow1() {


      tagWindow.style.transform = 'translateY(-100%)';
      setTimeout(() => {
        tagWindow.style.display = 'none';
        tagWindow.style.transform = 'none';
      }, 300); // 300ms为动画持续时间
    }

    function setupTagWindow() {
      const closeButton = document.querySelector('.tag-window-close-btn');
      closeButton.addEventListener('click', hideTagWindow);

      const closeButton1 = document.querySelector('.tag-window-close-btn1');
      closeButton1.addEventListener('click', hideTagWindow1);

      const tagButton = document.querySelector('.tag-btn');
      tagButton.addEventListener('click', showTagWindow);
    }

    setupTagWindow();





    function showNoteCount() {
      const count = document.getElementById("note-count").innerHTML;
      Toastify({
        text: `🥇Spenser，\n你总共记录了 ${count} 条笔记`,
        duration: 1000,
        gravity: "bottom",
        position: "center",
        style: {
          background: "#000000c4",
          borderRadius: "10px",
          lineHeight: "1.7",
          fontSize: "18px",
        },
        offset: {
          y: "400px",
        },
        transition: false,
        hideProgressBar: true, // 隐藏进度条，同时禁用动画效果
      }).showToast();
    }


    // 点击遮罩关闭confirm-dialog弹窗
    confirmBackdrop.addEventListener('click', event => {
      event.stopPropagation();
    });

    confirmDialog.addEventListener('click', event => {
      if (event.target === confirmDialog) {
        confirmDialog.style.display = 'none';
      }
    });

    // 添加点击事件，判断input-box是否获取焦点
    deleteAllBtn.addEventListener('click', function () {
      if (document.activeElement !== inputBox) { // input-box没有获取焦点
        confirmDialog.style.display = 'block';
      }
    });

    // 添加focus和blur事件，修改按钮的显示状态
    inputBox.addEventListener('focus', function () {
      deleteAllBtn.style.display = 'none';
      copyAllBtn.style.display = 'none';
    });

    inputBox.addEventListener('blur', function () {
      deleteAllBtn.style.display = 'block';
      copyAllBtn.style.display = 'block';
    });




    // 显示确认弹窗
    deleteAllBtn.addEventListener('click', () => {
      confirmDialog.style.display = 'block';
    });

    // 隐藏确认弹窗
    function hideConfirmDialog() {
      confirmDialog.style.display = 'none';
    }

    // 点击取消按钮时，隐藏确认弹窗
    confirmNoBtn.addEventListener('click', hideConfirmDialog);

    // 点击确定按钮时，删除所有数据并隐藏确认弹窗
    confirmYesBtn.addEventListener('click', () => {
      // 删除所有数据
      const noteList = document.querySelector('.note-list');
      noteList.innerHTML = '';

      // 删除本地数据
      localStorage.removeItem('notes');
      location.reload();
      // 隐藏确认弹窗
      hideConfirmDialog();
    });



    function checkInputBox() {
      if (inputBox.value === '') {
        sendBtn.style.color = '#a8a8a8';
      } else {
        sendBtn.style.color = '#1156d4';
      }
    }

    inputBox.addEventListener('input', checkInputBox);
    inputBox.addEventListener('focus', checkInputBox);
    inputBox.addEventListener('blur', checkInputBox);





    const backBtn = document.querySelector('.back-btn');

    function showBackBtn() {
      backBtn.style.display = 'block';
      iconBtn.style.display = 'block';
    }
    function hideBackBtn() {
      backBtn.style.display = 'none';

      setTimeout(() => {

        iconBtn.style.display = 'none';
      }, 1);
    }

    backBtn.addEventListener('click', () => {
      inputBox.blur();

    });


    copyAllBtn.addEventListener('click', () => {
      const notes = document.querySelectorAll('.note-item');

      const deleteBtn = document.querySelectorAll('.delete-btn');
      deleteBtn.forEach(btn => {
        btn.innerHTML = '';
      });

      const notesText = Array.from(notes)
        .map(note => {
          const timeIndex = note.innerText.indexOf('202'); // 找到时间的位置
          const text = note.innerText.slice(0, timeIndex); // 取出文字
          const time = note.innerText.slice(timeIndex); // 取出时间
          return `${time}\n${text}`; // 添加换行符
        })
        .reverse() // 反转数组
        .join('\n\n');

      const clipboard = document.createElement('textarea');
      clipboard.value = notesText;
      clipboard.setAttribute('readonly', '');
      clipboard.style.position = 'absolute';
      clipboard.style.left = '-9999px';
      document.body.appendChild(clipboard);
      clipboard.select();
      clipboard.setSelectionRange(0, clipboard.value.length);

      let success;
      try {
        success = document.execCommand('copy');
      } catch (e) {
        success = false;
      }

      if (success) {
        const toastB = document.createElement('div');
        toastB.innerHTML = '<i class="fas fa-check-circle"></i> 已全部复制';
        toastB.style.backgroundColor = 'rgba(0, 0, 0, 0.767)';
        toastB.style.color = 'white';
        toastB.style.fontSize = '18px';
        toastB.style.position = 'fixed';
        toastB.style.bottom = '40%';
        toastB.style.left = '50%';
        toastB.style.transform = 'translate(-50%, 0)';
        toastB.style.padding = '8px 13px';
        toastB.style.borderRadius = '12px';

        document.body.appendChild(toastB);
        setTimeout(() => {
          toastB.remove();
        }, 1000);
        setTimeout(() => {
          location.reload();
        }, 1000);
      }
    });






    const tagBtn1 = document.querySelector('.tag-btn1');
    tagBtn1.addEventListener('click', () => {
      const startPos = inputBox.selectionStart;
      const endPos = inputBox.selectionEnd;
      const currentValue = inputBox.value;
      const newValue = currentValue.substring(0, startPos) + "#" + currentValue.substring(endPos);
      inputBox.value = newValue;
      inputBox.focus();
      inputBox.setSelectionRange(startPos + 1, startPos + 1);
      setTimeout(() => {
        iconBtn.style.display = 'block';
      }, 1);
      iconBtn.style.display = 'block';
    });

    const tagBtn2 = document.querySelector('.tag-btn2');
    tagBtn2.addEventListener('click', () => {
      const startPos = inputBox.selectionStart;
      const endPos = inputBox.selectionEnd;
      const currentValue = inputBox.value;
      const newValue = "#待办 " + currentValue;
      inputBox.value = newValue;
      inputBox.focus();
      inputBox.setSelectionRange(startPos + 4, startPos + 4);
      setTimeout(() => {
        iconBtn.style.display = 'block';
      }, 1);
      iconBtn.style.display = 'block';
    });





    inputBox.addEventListener('input', resizeTextArea);

    const editBox = document.querySelector('.edit-box');


    const noteList = document.querySelector('.note-list');
    const notes = JSON.parse(localStorage.getItem('notes')) || [];

    function autoHeight(textarea) {
      if (textarea.clientHeight <= textarea.scrollHeight) {
        setTimeout(function () {
          textarea.style.height = 'auto';
          textarea.style.height = textarea.scrollHeight + 'px';
        }, 0);
      } else {
        textarea.style.height = '1.5em';
      }
    }

    const editContainer = document.createElement('div');

    const saveBtn = document.createElement('button');


    editContainer.className = 'edit-container';
    editBox.className = 'edit-box';
    saveBtn.className = 'save-btn';
    saveBtn.innerText = '保存'; editContainer.appendChild(editBox);
    editContainer.appendChild(saveBtn);
    noteList.appendChild(editContainer);


    function renderNoteList() {
      noteList.innerHTML = '';
      let clickTimer = null;
      const mask = document.querySelector('.mask');


      notes.forEach((note, index) => {
        const noteItem = document.createElement('div');
        const noteTime = document.createElement('div');
        const deleteBtn = document.createElement('div');
        noteItem.className = 'note-item';
        noteTime.className = 'note-time';
        deleteBtn.className = 'delete-btn';
        noteTime.innerText = `${note.time.slice(0, -3)}`.replace(/\//g, '-');

        noteItem.innerHTML = note.content.replace(/\n/g, '<br>');;

        deleteBtn.innerText = '删除';
        noteItem.appendChild(noteTime);
        noteItem.appendChild(deleteBtn);

        if (note.content.includes('#待办')) {
          const completeBtn = document.createElement('div');
          completeBtn.className = 'complete-btn';
          completeBtn.innerText = '完成';
          noteItem.insertBefore(completeBtn, deleteBtn);



          completeBtn.addEventListener('click', (event) => {
            event.stopPropagation();
            const completedList = JSON.parse(localStorage.getItem('completedList')) || [];

            // 去除样式代码，只保留文字
            const noteText = note.content.replace(/(<([^>]+)>)/gi, "");

            completedList.push(noteText); // 保存文本内容
            localStorage.setItem('completedList', JSON.stringify(completedList));
            notes.splice(index, 1);
            localStorage.setItem('notes', JSON.stringify(notes));
            renderNoteList();
            updateNoteCount();
          });
        }

        let clickCount = 0;
        let timerId = null;

        noteItem.addEventListener('click', () => {
          clickCount++;
          if (clickCount === 1) {
            timerId = setTimeout(() => {
              // 单击事件
              function hideTagWindow1() {

                tagWindow.style.transform = 'translateY(-100%)';
                setTimeout(() => {
                  tagWindow.style.display = 'none';
                  tagWindow.style.transform = 'none';
                }, 300); // 300ms为动画持续时间
              }
              hideTagWindow1();
              clickCount = 0;
              clearTimeout(timerId);
              timerId = null;
              const tempDiv = document.createElement('div');
              tempDiv.innerHTML = note.content;
              const text = tempDiv.textContent;

              const textArea = document.createElement('textarea');
              textArea.value = text;
              textArea.style.position = 'absolute';
              textArea.style.left = '-9999px';
              document.body.appendChild(textArea);
              textArea.select();
              document.execCommand('copy');
              document.body.removeChild(textArea);

              const toast = document.createElement('div');
              toast.className = 'toast';
              const icon = document.createElement('i');
              icon.innerHTML = '<i class="fas fa-check-circle"></i> '; // 使用FontAwesome的check图标
              toast.appendChild(icon);
              toast.appendChild(document.createTextNode('复制成功'));
              document.body.appendChild(toast);

              setTimeout(() => {
                toast.remove();
              }, 250);
            }, 300);
          } else {
            // 双击事件

            clearTimeout(timerId);
            timerId = null;
            clickCount = 0;
            const mask = document.querySelector('.mask'); //新增
            setTimeout(() => {
              autoHeight(editBox);
            }, 0);

            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = note.content;
            const text = tempDiv.textContent;



            editBox.value = text;
            editContainer.style.display = 'block';
            mask.style.display = 'block'; //新增


            document.body.appendChild(editContainer);

            // 自动获得焦点
            setTimeout(() => {
              editBox.focus();
              editBox.selectionStart = editBox.selectionEnd = editBox.value.length;
              if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
                editBox.focus();
                document.activeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
              }
            }, 0);

            saveBtn.onclick = () => {
              let content = editBox.value;
              if (content.includes('#')) {
                const hashtagRegex = /#(\S+)/g;
                content = content.replace(hashtagRegex, '<span style="background-color: #efeef8; color: #8580C8;padding: 2px 3px 2px 4px;font-size: 18px;border-radius: 3px;">$&</span>');
              }
              const linkRegex = /https?:\/\/\S+/g; // 匹配 http 或 https 链接
              content = content.replace(linkRegex, '<a href="$&" target="_blank">$&</a>'); // 将链接替换为带有<a>标签的文本
              notes.splice(index, 1, { content: content, time: note.time });
              localStorage.setItem('notes', JSON.stringify(notes));
              renderNoteList();
              editContainer.style.display = 'none';
              mask.style.display = 'none';
            };


            mask.onclick = () => {

              editContainer.style.display = 'none';
              mask.style.display = 'none';
            };
          }
        });



        deleteBtn.addEventListener('click', (event) => {
          event.stopPropagation();

          // 获取删除按钮的位置信息
          const { left, bottom } = deleteBtn.getBoundingClientRect();

          // 创建弹窗元素并设置样式
          const confirmBox1 = document.createElement('div');
          confirmBox1.className = 'confirm-box1';
          confirmBox1.innerHTML = `
    <div class="message1">确定删除？</div>
    <br>
    <button class="cancel-btn1">No</button>
    <button class="confirm-btn1">Yes</button>
  `;

          confirmBox1.style.position = 'fixed';
          confirmBox1.style.left = (left - 240) + 'px';
          confirmBox1.style.bottom = (window.innerHeight - bottom - 65) + 'px';

          // 将弹窗元素添加到页面中
          document.body.appendChild(confirmBox1);

          // 展示弹窗
          confirmBox1.style.display = 'flex';

          // 点击确定按钮删除笔记
          const confirmBtn1 = confirmBox1.querySelector('.confirm-btn1');
          confirmBtn1.addEventListener('click', () => {
            notes.splice(index, 1);
            localStorage.setItem('notes', JSON.stringify(notes));
            renderNoteList();
            updateNoteCount();
            // 隐藏弹窗
            confirmBox1.style.display = 'none';
          });

          // 点击取消按钮隐藏弹窗
          const cancelBtn1 = confirmBox1.querySelector('.cancel-btn1');
          cancelBtn1.addEventListener('click', () => {
            // 隐藏弹窗
            confirmBox1.style.display = 'none';
          });
        });





        noteList.insertBefore(noteItem, noteList.firstChild);

      });

    }


    renderNoteList();

    inputBox.addEventListener('input', () => {
      inputBox.style.height = `${inputBox.scrollHeight}px`;
    });



    function resizeTextArea() {
      const inputBox = document.getElementById('input-box');
      inputBox.style.height = '1.5em';
      inputBox.style.height = inputBox.scrollHeight + 'px';
    }

    function autoSizeTextArea(event) {
      // existing code here
      resizeTextArea();
    }




    sendBtn.addEventListener('click', () => {
      const value = inputBox.value.trim();
      if (value) {
        const time = new Date().toLocaleString();
        const note = {
          content: value,
          time,
        };
        const hashtagRegex = /#(\S+)/g;
        const contentWithColor = value.replace(hashtagRegex, `<span style="background-color: #efeef8; color: #8580C8;padding: 2px 3px 2px 4px;font-size: 18px;border-radius: 3px;">$&</span>`);

        note.content = contentWithColor;
        const linkRegex = /https?:\/\/\S+/g;
        const contentWithLinks = note.content.replace(linkRegex, '<a href="$&" target="_blank">$&</a>');
        note.content = contentWithLinks;
        notes.push(note);
        localStorage.setItem('notes', JSON.stringify(notes));
        renderNoteList();
        inputBox.value = '';
        inputBox.focus();
        setTimeout(() => {

          iconBtn.style.display = 'block';
        }, 1);

        inputBox.style.height = '1.5em';
        updateNoteCount();
        setTimeout(() => {

          noteList.scrollTop = noteList.scrollHeight;//滚动到底部
        }, 1);
        noteList.scrollTop = noteList.scrollHeight;//滚动到底部
      }
    });



    function sendNote() {
      if (!inputBox.value.trim()) return;
      const note = {
        content: inputBox.value.trim(),
        time: new Date().toLocaleString()
      };

      notes.push(note);
      localStorage.setItem('notes', JSON.stringify(notes));
      inputBox.value = '';

      renderNoteList();

    }
    function refreshList() {
      // 实现列表刷新的代码
      location.reload();
    }




  </script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.4/dist/sweetalert2.all.min.js"></script>
</body>

</html>